<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/invision.css" />
  </head>

  <body data-state="a">
    <input type="checkbox" name="" id="check" checked />
    <div id="app" data-flip-key="app">
      <header class="ui-header"></header>
      <div class="ui-cards" data-flip-no-scale data-flip-key="cards">
        <div class="ui-card" data-flip-no-scale data-flip-key="card">
          <div
            class="ui-feature"
            data-flip-no-scale
            data-flip-key="feature"
          ></div>
          <div class="ui-content" data-flip-no-scale data-flip-key="content">
            <div class="ui-title" data-flip-no-scale data-flip-key="title">
              InVision iOS
            </div>
            <div
              class="ui-subtitle"
              data-flip-no-scale
              data-flip-key="subtitle"
            >
              24 Documents
            </div>
            <ul class="ui-items" data-flip-no-scale data-flip-key="items">
              <li class="ui-item">Something 1</li>
              <li class="ui-item">Something 2</li>
              <li class="ui-item">Something 3</li>
              <li class="ui-item">Something 4</li>
              <li class="ui-item">Something 5</li>
            </ul>
          </div>
          <div class="ui-bg">
            <div class="ui-bg-color" data-flip-key="bg"></div>
            <div class="ui-bg-img" data-flip-key="bg-img"></div>
          </div>
        </div>

        <div class="ui-card" data-flip-no-scale data-flip-key="2card">
          <div
            class="ui-feature"
            data-flip-no-scale
            data-flip-key="2feature"
          ></div>
          <div class="ui-content" data-flip-no-scale data-flip-key="2content">
            <div class="ui-title" data-flip-no-scale data-flip-key="2title">
              InVision iOS
            </div>
            <div
              class="ui-subtitle"
              data-flip-no-scale
              data-flip-key="2subtitle"
            >
              24 Documents
            </div>
            <ul class="ui-items" data-flip-no-scale data-flip-key="2items">
              <li class="ui-item">Something 1</li>
              <li class="ui-item">Something 2</li>
              <li class="ui-item">Something 3</li>
              <li class="ui-item">Something 4</li>
              <li class="ui-item">Something 5</li>
            </ul>
          </div>
          <div class="ui-bg">
            <div class="ui-bg-color" data-flip-key="2bg"></div>
            <div class="ui-bg-img" data-flip-key="2bg-img"></div>
          </div>
        </div>
      </div>
      <footer class="ui-footer"></footer>
    </div>
    <script src="../dist/flipping.js"></script>
    <script>
      let state = 'a';

      Flipping.keyAttr = 'data-flip-key';
      const flipping = new Flipping.Flipping({
        duration: 1000,
        attribute: 'data-flip-key',
        // selector: '[data-flip-key]',
        activeSelector: el => {
          return (
            state === 'a' ||
            el.matches('.ui-cards') ||
            el.matches('.active *') ||
            el.classList.contains('active')
          );
        },
        plugins: []
      });

      flipping.applyDefaultStyles();

      const cards = document.querySelectorAll('.ui-card');
      const machine = {
        a: { CLICK: 'b' },
        b: { CLICK: 'a' }
      };

      cards.forEach(card => {
        card.addEventListener(
          'click',
          flipping.wrap(() => {
            console.log(state);
            state = machine[state].CLICK;
            if (state === 'b') {
              const activeCard = document.querySelector('.active');
              activeCard && activeCard.classList.toggle('active');
              card.classList.toggle('active');
            }
            document.body.setAttribute('data-state', state);
          })
        );
      });
    </script>
  </body>
</html>
